<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mapv</title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div id="map"></div>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script src="http://huiyan-fe.github.io/mapv/build/mapv.min.js"></script>

<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("map", {
        enableMapClick: false
    });    // 创建Map实例
    map.centerAndZoom(new BMap.Point(114.15, 22.6), 12);  // 初始化地图,设置中心点坐标和地图级别
    //    map.centerAndZoom(new BMap.Point(114.321317, 30.598428), 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    // 地图自定义样式


    map.setMapStyle({
        styleJson: [
            {
                "featureType": "land",
                "elementType": "geometry",
                "stylers": {
                    "color": "#212121"
                }
            },
            {
                "featureType": "building",
                "elementType": "geometry",
                "stylers": {
                    "color": "#2b2b2b"
                }
            },
            {
                "featureType": "highway",
                "elementType": "all",
                "stylers": {
                    "lightness": -42,
                    "saturation": -91
                }
            },
            {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -77,
                    "saturation": -94
                }
            },
            {
                "featureType": "green",
                "elementType": "geometry",
                "stylers": {
                    "color": "#1b1b1b"
                }
            },
            {
                "featureType": "water",
                "elementType": "geometry",
                "stylers": {
                    "color": "#181818"
                }
            },
            {
                "featureType": "subway",
                "elementType": "geometry.stroke",
                "stylers": {
                    "color": "#181818"
                }
            },
            {
                "featureType": "railway",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -52
                }
            },
            {
                "featureType": "manmade",
                "elementType": "geometry",
                "stylers": {
                    "color": "#1b1b1b"
                }
            },
            {
                "featureType": "local",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -75,
                    "saturation": -91
                }
            },
            {
                "featureType": "subway",
                "elementType": "geometry",
                "stylers": {
                    "lightness": -65
                }
            },
            {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                    "lightness": -40
                }
            },
            {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                    "color": "#8b8787",
                    "weight": "1",
                    "lightness": -29
                }
            },
            {
                "featureType": "poilabel",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            },
            {
                "featureType": "road",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            },
            {
                "featureType": "administrative",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            },
            {
                "featureType": "poilabel",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            },
            {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }
        ]
    });

//    $.get('jiedao_polygon_wgs84.geojson', function (geojson) {
//        var options = {
//            fillStyle: 'rgba(0, 0, 0, 0.4)',
//            max: 100,
//            gradient: {
//                0: 'rgba(0, 0, 0, 0.2)',
//                1: 'rgba(0, 0, 0, 0.6)'
//            },
//            draw: 'intensity'
//        }
//
//        var dataSet = mapv.geojson.getDataSet(geojson);
//        var data = dataSet.get();
//        for (var i = 0; i < data.length; i++) {
//            if (data[i].name === 'China') {
//                data[i].count = 100
//            } else {
//                data[i].count = Math.random() * 100
//            }
//        }
//        dataSet = new mapv.DataSet(data);
//
//        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
//    });
    $.get('nAResults.txt', function (rs) {

        var data = [];
        var timeData = [];

        rs = rs.split("\n");
        console.log(rs.length);
        var maxLength = 0;
        for (var i = 0; i < rs.length; i++) {
            var item = rs[i].split('|');
            var coordinates = [];
            if (item.length > maxLength) {
                maxLength = item.length;
            }
            for (j = 0; j < item.length; j += 1) {
                coordinates.push([item[j].split(',')[0], item[j].split(',')[1]]);
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [item[j].split(',')[0], item[j].split(',')[1]]
                    },
                    count: 1,
                    time: j
                });
            }
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: coordinates
                }
            });

        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            strokeStyle: 'rgba(0,0,0,0.5)',
//            coordType: 'bd09mc',
            coordType: 'wgs84',
            // globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(0,0,0,0.2)',
            shadowBlur: 3,
            lineWidth: 3.0,
            draw: 'simple'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);


        var dataSet = new mapv.DataSet(timeData);

        var options = {
            fillStyle: 'rgba(255, 250, 250, 0.2)',
            coordType: 'wgs84',
            globalCompositeOperation: "lighter",
            size: 1.5,
            animation: {
                stepsRange: {
                    start: 0,
                    end: 5000
                },
                trails: 1,
                duration: 150,
            },
            draw: 'simple'
        }


        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
    });

</script>

</body>
</html>
